Patterns panda
Panda cssの概念
Use the built-in layout patterns like stack, flex, grid to speed up your development
Patterns - Panda CSS
Patterns are layout primitives can be used to create robust and responsive layouts with ease. Panda comes with predefined patterns like stack, hstack, vstack, wrap, etc. These patterns can be used as functions or JSX elements.
Layout レイアウト UIのパターンの意図が強いのね。
確かに、wrapとかstack系のパターン一定あるけど、都度componentやclass作りがちなので、UIフレームワークでは用意されていること多い。
それを、自分でも作れるよ!って感じね。
パターンは、繰り返しを減らし、読みやすさを向上させるための事前定義されたスタイルのセットと考えてください。関数と同様に、必要に応じてプロパティをオーバーライドできますcss。
感想
結構扱いが難しくて、もうちょっと事例集めたい。
styled-system/jsx panda出来るんだけど、割と難しい。
ボタン Button UIをPatternsで作っていたんだけど、結構理解難しいし、a11y観点で扱い難しかった。
Recipes pandaじゃだめ?と思っちゃう。
公式を見て、改めて思ったのは安直に、あまり自分で作らなくてもいいかな。
一定同じのが現れて、何度も書くのダルくなった時に作るぐらいで良い。